<style>
  .header-font {
    font-size: 15px;
    font-weight: bold;
  }
  .line {
    margin: 10px 0;
    width: 100%;
    border: 0.5px solid rgb(218, 218, 218);
  }
  .table {
    clear: left;
    margin-top: 10px;
  }
  .customer-form {
    margin-bottom: -10px;
  }
  .paging {
    float:right;
    margin-top:10px;
  }
  .img{
   width: 150px;
   height: 100px;
   float: left;
   margin: 5px;
  }
  .analysis-btn-export {
    float: left;
    margin-bottom: 10px;
    /*
    margin-top: -46px; */
    /* float: right; */
  }
</style>
<template>
  <div>
    <div class='header-font'>
      <Icon type="md-apps" />
      <span>客户分析</span>
    </div>
    <div class="line"></div>
    <analysis-form
      class="customer-form"
      @on-success-valid="handleSubmit"
      :title="title">
    </analysis-form>
    <btn-export :tableData="analysisList" :tableTitle="columns" :title="title" class="analysis-btn-export"></btn-export>
    <Table
      class="table"
      :columns="columns"
      :data="historyData"
      :loading="loading"
      border>
    </Table>
    <table-page
      class="paging"
      :dataCount="dataCount"
      @change-page="changePage"
      @change-page-size="changePageSize"
      :pageSize="pageSize">
    </table-page>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import AnalysisForm from '_c/analysis-form'
import BtnExport from '_c/btn-export'
import TablePage from '_c/table-page'
export default {
  components: {
    AnalysisForm,
    BtnExport,
    TablePage
  },
  data () {
    return {
      page: 1,
      title: '销售管理客户分析',
      confirmData: {},
      statearr: '3,4,5',
      playload: null,
      rows: 20,
      loading: true,
      columns: [
        {
          title: '序号',
          type: 'index2',
          width: 80,
          align: 'center',
          // fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.pageSize + 1)
          }
        },
        {
          title: '客户姓名',
          key: 'uname',
          minWidth: 120,
          align: 'center'
          // fixed: 'left'
        },
        {
          title: '客户电话',
          key: 'tel',
          minWidth: 120,
          align: 'center'
        },
        {
          title: '创建日期',
          key: 'ctime',
          minWidth: 100,
          maxWidth: 100,
          align: 'center'
        },
        {
          title: '客户状态',
          key: 'state',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {},
              params.row.state === '0' ? '未预约' : params.row.state === '1' ? '已预约' : params.row.state === '2' ? '未到访' : params.row.state === '3' ? '已到店' : params.row.state === '4' ? '已签约' : params.row.state === '5' ? '已退款' : '-'
              // params.row.method
            )
          }
        },
        {
          title: '预约时间',
          key: 'appointime',
          minWidth: 100,
          maxWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.appointime ? params.row.appointime : '-')
          }
        },
        {
          title: '到店时间',
          key: 'comdate',
          align: 'center',
          minWidth: 100,
          maxWidth: 100,
          render: (h, params) => {
            return h('span', params.row.comdate ? this.$moment(params.row.comdate).format('YYYY-MM-DD HH:mm:ss') : '-')
          }
        },
        {
          title: '商品',
          key: 'tname',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            if (params.row.tname && params.row.tname.length > 5) {
              return h('span', {
                attrs: {
                  title: params.row.tname
                }
              }, params.row.tname ? params.row.tname.slice(0, 5) + '...' : '-')
            } else {
              return h('span', params.row.tname ? params.row.tname : '-')
            }
            // return h('span', params.row.tname ? params.row.tname : '-')
          }
        },
        {
          title: '签约日期',
          key: 'orderdate',
          align: 'center',
          minWidth: 100,
          maxWidth: 100,
          render: (h, params) => {
            return h('span', params.row.orderdate ? this.$moment(params.row.orderdate).format('YYYY-MM-DD HH:mm:ss') : '-')
          }
        },
        {
          title: '签约金额',
          key: 'cprice',
          align: 'center',
          minWidth: 100
        },
        {
          title: '跟踪状态',
          key: 'state0',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            return h('span', params.row.state0 === 0 ? '有效' : '流失')
          }
        },
        {
          title: '备注',
          key: 'remarks',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            if (params.row.remarks && params.row.remarks.length > 8) {
              return h('span', {
                attrs: {
                  title: params.row.remarks
                }
              }, params.row.remarks ? params.row.remarks.slice(0, 8) + '...' : '-')
            } else {
              return h('span', params.row.remarks ? params.row.remarks : '-')
            }
          }
        }
      ]
    }
  },
  computed: {
    ...mapState({
      analysisList: state => state.analysis.analysisList,
      dataCount: state => state.analysis.analysisDataCount,
      historyData: state => state.analysis.analysisHistoryData,
      pageSize: state => state.analysis.analysisPageSize,
      row: state => state.analysis.row
    })
  },
  methods: {
    ...mapActions([
      'getAnalysisList',
      'getAnalysisCurrentRow',
      'editAnalysisData',
      'changeAnalysisPage',
      'changeAnalysisPageSize'
    ]),
    handleSubmit (playload) {
      this.loading = true
      this.playload = {
        groupType: 1,
        before: 0,
        month: 1,
        state0: playload.state0
      }
      if (playload.repeat !== '') {
        this.playload = {
          groupType: 0,
          state: playload.repeat,
          state0: playload.state0
        }
      }
      if (playload.buyState !== '' && playload.buyState !== 2) {
        this.playload = {
          groupType: 1,
          before: 0,
          month: playload.buyState,
          state0: playload.state0
        }
      } else if (playload.buyState === 2) {
        this.playload = {
          groupType: 1,
          before: 1,
          month: 6,
          state0: playload.state0
        }
      }
      if (playload.unSignState !== '' && playload.unSignState !== 2) {
        this.playload = {
          groupType: 2,
          before: 0,
          month: playload.unSignState,
          state0: playload.state0
        }
      } else if (playload.unSignState === 2) {
        this.playload = {
          groupType: 2,
          before: 1,
          month: 6,
          state0: playload.state0
        }
      }
      // console.log(this.playload)
      this.getAnalysisList(this.playload).then((res) => {
        if (res.data.state === '000') {
          this.loading = false
        }
      })
    },
    // handleClick (row) {
    //   console.log(row)
    //   let newRow = {}
    //   this.id = row.id
    //   if (row) {
    //     newRow = Object.assign({}, row)
    //   }
    //   this.getArriveCurrentRow(newRow)
    //   this.updateCustomerDrawerState(true)
    // },
    changePage (index) {
      this.loading = true
      this.page = index
      this.changeAnalysisPage(index)
      this.getAnalysisList({
        rows: this.rows,
        page: index,
        ...this.playload
      }).then((res) => {
        if (res.data.state === '000') {
          this.loading = false
        }
      })
    },
    changePageSize (value) {
      this.loading = true
      this.rows = value
      this.changeAnalysisPageSize(value)
      this.changePage(this.page)
      this.getAnalysisList({
        rows: value,
        ...this.playload
      }).then((res) => {
        if (res.data.state === '000') {
          this.loading = false
        }
      })
    }
  },
  created () {
    this.getAnalysisList({
      groupType: 1,
      before: 0,
      month: 1
    }).then((res) => {
      if (res.data.state === '000') {
        this.loading = false
      }
    })
  }
}
</script>
